"use client";

import { Header } from "@/sections/Header";
import { useEffect, useState, Suspense } from "react";
import { motion } from "framer-motion";
import dynamic from 'next/dynamic';
import { ClientSideContent } from "@/components/ClientSideContent";

// 使用Next.js的dynamic导入而不是React.lazy
const HeroSection = dynamic(() => import('@/sections/Hero').then(mod => ({ default: mod.HeroSection })), { ssr: false });
const ProjectsSection = dynamic(() => import('@/sections/Projects').then(mod => ({ default: mod.ProjectsSection })), { ssr: false });
const TapeSection = dynamic(() => import('@/sections/Tape').then(mod => ({ default: mod.TapeSection })), { ssr: false });
const FriendsSection = dynamic(() => import('@/sections/Friends').then(mod => ({ default: mod.FriendsSection })), { ssr: false });
const ContactSection = dynamic(() => import('@/sections/Contact').then(mod => ({ default: mod.ContactSection })), { ssr: false });

// 占位加载组件
const SectionPlaceholder = () => (
  <div className="w-full h-64 bg-indigo-900/20 animate-pulse rounded-xl my-8"></div>
);

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3,
      when: "beforeChildren",
      delayChildren: 0.2
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.5
    }
  }
};

export default function Home() {
  const [isClient, setIsClient] = useState(false);
  const [isVisible, setIsVisible] = useState({
    hero: false,
    projects: false,
    tape: false,
    friends: false,
    contact: false
  });

  useEffect(() => {
    setIsClient(true);
    
    // 使用Intersection Observer实现高效的视口内渲染
    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
      const sectionObserver = new IntersectionObserver(
        (entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const id = entry.target.id;
              setIsVisible(prev => ({
                ...prev,
                [id]: true
              }));
              sectionObserver.unobserve(entry.target);
            }
          });
        },
        { 
          rootMargin: '100px', // 提前100px开始加载
          threshold: 0.1 
        }
      );
      
      // 监控各个区域
      ['hero', 'projects', 'tape', 'friends', 'contact'].forEach(id => {
        const element = document.getElementById(id);
        if (element) sectionObserver.observe(element);
      });
      
      return () => sectionObserver.disconnect();
    }
  }, [isClient]);

  if (!isClient) {
    return null; // 避免服务器端渲染动画导致的闪烁
  }

  return (
    <>
      {/* 添加客户端内容组件 */}
      <ClientSideContent />
      
      <motion.div
        initial="hidden"
        animate="visible"
        variants={containerVariants}
      >
        <Header />
        
        <div id="hero" className="content-visibility-auto">
          <motion.div variants={itemVariants}>
            <Suspense fallback={<SectionPlaceholder />}>
              <HeroSection />
            </Suspense>
          </motion.div>
        </div>
        
        <div id="projects" className="content-visibility-auto">
          <motion.div variants={itemVariants}>
            <Suspense fallback={<SectionPlaceholder />}>
              {isVisible.projects ? <ProjectsSection /> : <SectionPlaceholder />}
            </Suspense>
          </motion.div>
        </div>
        
        <div id="tape" className="content-visibility-auto">
          <motion.div variants={itemVariants}>
            <Suspense fallback={<SectionPlaceholder />}>
              {isVisible.tape ? <TapeSection /> : <SectionPlaceholder />}
            </Suspense>
          </motion.div>
        </div>
        
        <div id="friends" className="content-visibility-auto">
          <motion.div variants={itemVariants}>
            <Suspense fallback={<SectionPlaceholder />}>
              {isVisible.friends ? <FriendsSection /> : <SectionPlaceholder />}
            </Suspense>
          </motion.div>
        </div>
        
        <div id="contact" className="content-visibility-auto">
          <motion.div variants={itemVariants}>
            <Suspense fallback={<SectionPlaceholder />}>
              {isVisible.contact ? <ContactSection /> : <SectionPlaceholder />}
            </Suspense>
          </motion.div>
        </div>
      </motion.div>
    </>
  );
}
